<template>
  <div class="main">
    <Row justify="space-between">
      <Col flex="770px">
        <div class="firstList">
          <h3 class="title">
            <span class="t">{{ title }}</span>
            <router-link target="_blank" to="/articleList?&itemType=cms_index_last">查看更多 <RightOutlined /></router-link>
          </h3>

          <ul class="firstList_body">
            <li v-for="item in ArticleList" :key="item.article_id">
              <a target="_blank" :href="`../articleDetail/${item.article_id}`">{{ item.article_title }}</a>
              <span>{{ parseTime(item.publish_time) }}</span>
            </li>
          </ul>
          <div class="pt80" v-if="requestComplete && ArticleList.length===0">
            <Empty description="暂无数据"/>
          </div>
        </div>
      </Col>
      <Col flex="384px">

        <div class="system">
          <h3 class="title">
            <span class="t">数据服务</span>
          </h3>

          <ul class="noticeComp_body">
            <li class="n1">
              <a href="/compList">
                <span>查企业</span>
                <p>一键查询企业数据</p>
              </a>
            </li>
            <li class="n2">
              <a href="/staffList">
                <span>查人员</span>
                <p>一键查询⼈员数据</p>
              </a>
            </li>
            <li class="n3">
              <a href="/proList">
                <span>查项目</span>
                <p>一键查询项目数据</p>
              </a>
            </li>
            <li class="n4">
              <a target="_blank" href="http://jsy.xjjs.gov.cn:8030">
                <span>查信用</span>
                <p>一键查询企业信用</p>
              </a>
            </li>

            <li class="n5">
              <a href="/service">
                <span>更多查询服务 <RightOutlined /></span>
              </a>
            </li>
          </ul>
        </div>


      </Col>
    </Row>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, ref} from 'vue';
import { Row, Col , Empty  } from "ant-design-vue";
import { RightOutlined } from '@ant-design/icons-vue';
import  articleList  from './articleList.vue';
import {getArticleListApi} from "/@/api/article";
import {getItemTreeApi} from "/@/api/theme";
import {parseTime} from "/@/utils";

export default defineComponent({
  name: 'noticeComp',
  components: { Row, Col , Empty , RightOutlined  , articleList },
  setup() {
    const requestComplete = ref<boolean>(false);
    const itemId:string = 'cms_index_last';
    const title = ref<string>('建设要闻');
    const ArticleList = ref([]);
    const coverArticle = reactive({
      article_id:'',
      article_title:''
    })

    const getArticleList = async () => {
      let data = await getArticleListApi({itemId: itemId,current: 1, size: 7});
      requestComplete.value=true;
      let { total , records } = data;
      if(total) {
        ArticleList.value = records;
        coverArticle.article_id = records[0].article_id;
        coverArticle.article_title = records[0].article_title
      }
    };

    const getItemTree = async () => {
      const Param = { includeSelf:true,itemId:itemId }
      let { success , data } = await getItemTreeApi(Param);
      if(success){
        title.value = data[0].data.itemName
      }
    }

    const init = () => {
      getArticleList();
      getItemTree()
    }

    onMounted(init);

    return { requestComplete , title ,ArticleList,parseTime,coverArticle}
  }
})
</script>

<style lang="less" scoped>
.main {
  padding-top: 40px;
  padding-bottom: 60px;
}

.firstList{
  .title{
    border-bottom: 1px solid #E0E5EB;

    span.t{
      display: inline-block;
      padding-bottom: 10px;
      font-size: 20px;
      line-height: 28px;
      border-bottom: 3px solid #CD1922 ;
    }

    a{
      float: right;
      font-size: 14px;
      transform: translateY(8px);

      .anticon{
        font-size: 14px;
      }
    }
  }
}

.firstList_body {
  width: 770px;

  >li  {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    font-size: 16px;
    line-height: 20px;
    color: #262626;

    a{
      display: inline-block;
      width: calc(100% - 100px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:hover{
        color: @blue;
      }
    }

    >span {
      color: #999;
    }
  }
}

.noticeComp_body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 10px;
  margin-bottom: 0;

  >li  {
    width: 187px;
    height: 110px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 20px;
    color: #262626;

    a{
      display: block;
      width: 100%;
      height: 100%;
      padding: 30px 20px;
      overflow: hidden;
      color: #FFF;

      >span {
        font-size: 20px;
      }

      p{
        margin-top: 10px;
        color: rgba(255,255,255,.5);
      }
    }

    &.n1{ background: #317EDC; }

    &.n2{ background: #31A6C2; }

    &.n3{ background: #F06424; }

    &.n4{ background: #1BAC7E; }

    &.n5{
      width: 100%;
      height: 84px;
      margin-bottom: 0;
      background: #f6f6f6;

      a{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #262626;

        span{ font-size: 18px;}
      }
    }
  }
}

.system{
  .title{
    border-bottom: 1px solid #E0E5EB;

    span.t{
      display: inline-block;
      padding-bottom: 10px;
      font-size: 20px;
      line-height: 28px;
      border-bottom: 3px solid #CD1922 ;
    }
  }
}


</style>
